<template>
	<view>
		<!-- 页面内容容器 - 用于添加过渡效果 -->
		<view class="page-container" :class="{ 'submitting': isSubmitting }">
			<view class="content">
				<view class="title">活动信息</view>
				<view class="ifom">
					<view class="u_img">
						<image :src="dataslist.coverImage" mode="" class="corve_img"></image>
					</view>
					<view class="prices">
						  <view>{{dataslist.title}}</view>
						  <view>{{dataslist.paymentType == 0 ? '免费' : (dataslist.paymentType == 1 ? dataslist.paymentAmount + '积分' : '￥' + dataslist.paymentAmount )}}</view>
					</view>
				</view>
				<view class="quota">
				  活动时间：{{dataslist.startTime + '-' + dataslist.endTime}}
				</view>
				<view class="quota">
					活动名额：{{meng == '不限' ? '不限' : dataslist.quota}}
				</view>
				<view class="quota">
					活动性质：{{dataslist.paymentType == 0 ? '免费' : '收费'}}
				</view>
			</view>
			<view class="content">
				<view class="title">基本信息</view>
				<view class="lbe">
					<view class="name">
						联系人姓名：
					</view>
					<input 
						type="text" 
						placeholder="请输入联系人姓名" 
						placeholder-style="color:#A3A3A3" 
						v-model="user.name"
						:class="{ 'error': nameError }"
						:disabled="isSubmitting"
					/>
					<view v-if="nameError" class="error-tip">请输入联系人姓名</view>
				</view>
				<view class="lbe">
					<view class="name">
						联系人电话：
					</view>
					<input 
						type="text" 
						placeholder="请输入电话号码" 
						placeholder-style="color:#A3A3A3" 
						v-model="user.phone"
						:class="{ 'error': phoneError }"
						:disabled="isSubmitting"
					/>
					<view v-if="phoneError" class="error-tip">请输入正确的电话号码</view>
				</view>
			</view>
			
			<!-- 提交按钮 - 包含加载动画 -->
			<view 
				class="payment" 
				@click="SignUp"
				:class="{ 'submitting': isSubmitting }"
				:disabled="isSubmitting"
			>
				<template v-if="!isSubmitting">
					<image src="/static/vg.png" mode="widthFix"></image>
					<view>{{ dataslist.paymentType == 0 ? '立即报名' : '支付报名费'}}</view>
				</template>
				<template v-if="isSubmitting">
					<view class="loading-spinner">
						<view class="spinner-dot"></view>
						<view class="spinner-dot"></view>
						<view class="spinner-dot"></view>
					</view>
					<view>提交中...</view>
				</template>
			</view>
		</view>
		
		<!-- 页面级加载动画遮罩 -->
		<view class="page-loading-mask" v-if="isSubmitting">
			<view class="page-loading-container">
				<!-- 主加载动画 -->
				<view class="main-spinner">
					<view class="spinner-circle"></view>
				</view>
				<!-- 加载文字 -->
				<view class="loading-text">{{ loadingText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { activityregister, activitycreate, activitypay } from '@/core/api/index.js'
import { mapState } from 'vuex';
export default {
	data() {
		return {
			meng: 0,
			id: "",
			user: {
				name: '',
				phone: '',
				number: ''
			},
			// 验证状态
			nameError: false,
			phoneError: false,
			numberError: false,
			numberErrorMsg: '',
			dataslist: {},
			// 提交状态和加载文本
			isSubmitting: false,
			loadingText: '正在提交报名信息...'
		}
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	onLoad(r) {
		this.dataslist = JSON.parse(decodeURIComponent(r.itme))
		this.dataslist.coverImage = 'https:' + this.dataslist.coverImage
		this.meng = r.meng
	},
	methods: {
		// 表单验证
		validateForm() {
			let isValid = true
			this.nameError = false
			this.phoneError = false
			this.numberError = false
			this.numberErrorMsg = ''
			
			// 验证姓名
			if (!this.user.name.trim()) {
				this.nameError = true
				isValid = false
			}
			
			// 验证电话
			const phoneReg = /^1[3-9]\d{9}$/
			if (!this.user.phone.trim() || !phoneReg.test(this.user.phone)) {
				this.phoneError = true
				isValid = false
			}
			
			return isValid
		},
		
		async SignUp() {
			// 先进行表单验证
			if (!this.validateForm()) {
				return
			}
			
			// 开始提交，显示动画
			this.isSubmitting = true
			this.loadingText = '正在提交报名信息...'
			
			try {
				// 更新加载文本，提供更具体的反馈
				setTimeout(() => {
					this.loadingText = '正在处理您的请求...'
				}, 1000);
				
				const datas = await activitycreate(this.dataslist.id)
				if (datas.code != '00000') {
					uni.showToast({
						title: datas.message || '报名失败，请重试',
						icon: 'none'
					})
					this.isSubmitting = false
					return
				}
				
				// 更新加载文本
				if(this.dataslist.paymentType != 0){
					this.loadingText = '正在准备支付信息...'
				}
				
				let parmes = {
					userId: this.userInfo.id,
					name: this.user.name,
					phone: this.user.phone,
					orderNO: datas.data.orderNO
				}
				
				const data = await activitypay(parmes)
				if (data.code == '00000') {
					// 更新加载文本
					this.loadingText = '处理完成，正在跳转...'
					
					// 延迟处理，让用户看到反馈
					setTimeout(() => {
						let prdata = data.data
						if (this.dataslist.paymentType == 0) {
							uni.navigateTo({
								url: '/pages/activity/success'
							})
						} else if (this.dataslist.paymentType == 1) {
							uni.showToast({
								title: `已扣除积分${this.dataslist.paymentAmount}`
							})
							uni.navigateTo({
								url: '/pages/activity/success'
							})
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: prdata.timeStamp,
								nonceStr: prdata.nonceStr,
								package: prdata.packageValue,
								signType: prdata.signType,
								paySign: prdata.paySign,
								success: async res => {
									console.log('success:' + JSON.stringify(res));
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/activity/success'
										})
									}, 1000)
								},
								fail: function (err) {
									console.log('fail:' + JSON.stringify(err));
									this.isSubmitting = false
								}.bind(this)
							});
						}
						this.isSubmitting = false
					}, 1500)
				} else {
					uni.showToast({
						title: data.message,
						icon: 'none'
					})
					this.isSubmitting = false
				}
				
			} catch (error) {
				console.error('报名失败:', error)
				uni.showToast({
					title: error.message || '报名失败，请重试',
					icon: 'none'
				})
				this.isSubmitting = false
			}
		}
	}
}
</script>

<style lang="scss">
	// 页面容器 - 用于添加提交时的过渡效果
	.page-container {
		transition: all 0.3s ease;
		
		&.submitting {
			// 提交时页面内容轻微变暗并缩放
			filter: brightness(0.95);
			transform: scale(0.995);
			pointer-events: none; // 防止操作
		}
	}
	
	.content {
		padding: 30rpx 0 20rpx;
		margin: 20rpx 30rpx;
		background-color: #fff;
		transition: all 0.3s ease;
		
		// 提交时添加模糊效果
		.page-container.submitting & {
			filter: blur(2rpx);
		}
		
		.ifom {
			padding: 20rpx 30rpx;
			margin-bottom: 15rpx;
			display: flex;
			
			.u_img {
				width: 180rpx;
				height: 100rpx;
				margin-right: 20rpx;
				
				image {
					width: 100%;
					border-radius: 15rpx;
					height: 100%;
				}
			}
			
			.prices {
				font-size: 30rpx;
				
				view:nth-child(2) {
					font-weight: 600;
					color: #F26B2E;
					margin-top: 10px;
				}
			}
		}
		
		.quota {
			padding-left: 30rpx;
			color: #666666;
			margin-bottom: 15rpx;
		}
		
		.title {
			padding-left: 35rpx;
			font-size: 30rpx;
			position: relative;
			font-weight: bold;
		}
		
		.title::after {
			content: " ";
			position: absolute;
			width: 6rpx;
			left: 3%;
			top: 50%;
			transform: translate(-50%, -50%);
			height: 30rpx;
			border-radius: 10px;
			background: var(--Color, #F26B2E);
		}
		
		.lbe {
			display: flex;
			align-items: center;
			padding: 50rpx 40rpx 30rpx;
			justify-content: space-between;
			border-bottom: 1rpx solid #F9F9F9;
			position: relative;
			
			input {
				text-align: right;
				transition: all 0.2s ease;
			}
			
			input:disabled {
				background-color: #f5f5f5;
				color: #999;
			}
			
			// 错误样式
			.error {
				border-color: #F56C6C !important;
			}
			
			.error-tip {
				position: absolute;
				right: 40rpx;
				bottom: 4rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				color: #F56C6C;
			}
		}
	}
	
	// 提交按钮样式
	.payment {
		width: 500rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		border-radius: 60rpx;
		margin: 160rpx auto;
		background-color: #F26B2E;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		transition: all 0.3s ease;
		cursor: pointer;
		// 确保按钮在提交状态下仍可点击（虽然已禁用）
		.page-container.submitting & {
			pointer-events: auto;
		}
		
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		
		&.submitting {
			background-color: #f59a6a;
			cursor: not-allowed;
		}
	}
	
	// 按钮加载动画
	.loading-spinner {
		display: flex;
		margin-right: 10rpx;
		
		.spinner-dot {
			width: 16rpx;
			height: 16rpx;
			margin: 0 4rpx;
			border-radius: 50%;
			background-color: #fff;
			animation: bounce 1.4s infinite ease-in-out both;
		}
		
		.spinner-dot:nth-child(1) {
			animation-delay: -0.32s;
		}
		
		.spinner-dot:nth-child(2) {
			animation-delay: -0.16s;
		}
	}
	
	// 页面级加载遮罩
	.page-loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		// 淡入动画
		animation: fadeIn 0.3s ease forwards;
	}
	
	.page-loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	// 主加载动画
	.main-spinner {
		width: 100rpx;
		height: 100rpx;
		position: relative;
		margin-bottom: 30rpx;
	}
	
	.spinner-circle {
		width: 100%;
		height: 100%;
		border: 6rpx solid #f3f3f3;
		border-top: 6rpx solid #F26B2E;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	
	.loading-text {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		// 文本加载动画
		animation: pulse 1.5s infinite;
	}
	
	// 动画定义
	@keyframes bounce {
		0%, 80%, 100% { transform: scale(0); }
		40% { transform: scale(1.0); }
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	
	@keyframes pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.7; }
	}
</style>
